<template>
  <el-menu
    mode="horizontal"
    default-active="1"
    @select="handleSelect"
    :collapse="isCollapsed"
    class="menu"
  >
    <el-menu-item index="1">
      <el-icon><House /></el-icon>
      <span>首页</span>
    </el-menu-item>
    <el-menu-item index="2">
      <el-icon><Notebook /></el-icon>
      <span>宠物百科</span>
    </el-menu-item>
    <el-menu-item index="3">
      <el-icon><Notebook /></el-icon>
      <span>宠物知识</span>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><ChatLineSquare /></el-icon>
      <span>养宠交流贴</span>
    </el-menu-item>
    <el-menu-item index="9">
      <el-icon><ChatLineSquare /></el-icon>
      <span>在线聊天室</span>
    </el-menu-item>
    <el-sub-menu v-if="haslocalStorage" index="5">
      <template #title>
        <el-icon><UserFilled /></el-icon>
        <span>{{ storedUser.username }}</span>
      </template>
      <el-menu-item index="5" v-if="haslocalStorage">
        <el-icon><UserFilled /></el-icon>
        <span>个人中心</span>
      </el-menu-item>
      <el-menu-item index="8">退出登录</el-menu-item>
    </el-sub-menu>
    <el-menu-item v-if="!haslocalStorage" index="6">
      <el-icon><UserFilled /></el-icon>
      <span>注册</span>
    </el-menu-item>
    <el-menu-item v-if="!haslocalStorage" index="7">
      <el-icon><UserFilled /></el-icon>
      <span>登录</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import { ref } from "vue";
import router from "@/router";
import { ElMessageBox, ElMessage } from "element-plus";
import { onMounted } from "vue";
import { LoginOut } from "@/api/auth";

const haslocalStorage = localStorage.getItem("user_info") !== null;
console.log("haslocalStorage", haslocalStorage);
const storedUser = JSON.parse(localStorage.getItem("user_info"));

const isCollapsed = ref(false);

const handleSelect = (index: string) => {
  switch (index) {
    case "1":
      router.push("/home");
      break;
    case "2":
      router.push({ name: "BaikeList" });
      break;
    case "3":
      router.push({ name: "BaikeArticleList" });
      break;
    case "4":
      router.push({ name: "TieziT" });
      break;
    case "5":
      router.push({ name: "User" });
      break;
    case "6":
      router.push({ name: "Register" });
      break;
    case "7":
      router.push({ name: "Login" });
      break;
    case "8":
      loginOut();
      break;
    case "9":
      router.push({name:'chatLive'});
      break;
  }
};

const loginOut = () => {
  ElMessageBox.confirm(
    "是否要退出登录状态",
    "退出登录",
    {
      confirmButtonText: "退出登录",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      localStorage.removeItem("user_info");
      localStorage.removeItem("login_status");
      LoginOut()
        .then((response) => {
          ElMessage({
            type: "success",
            message: "退出登录状态成功",
          });
          window.location.href = "/";
        })
        .catch(() => {
          ElMessage({
            type: "error",
            message: "退出登录失败",
          });
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消退出登录",
      });
    });
};

onMounted(() => {
  // 可以在这里添加初始化逻辑
});
</script>

<style scoped>
.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.menu .el-menu-item,
.menu .el-sub-menu__title {
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
}

.menu .el-menu-item:hover,
.menu .el-sub-menu__title:hover {
  background-color: #f5f7fa;
}

.menu .el-icon {
  margin-right: 5px;
}
</style>